<template>
	<view class="body d-f d-c">
		<search></search>
		<scroll-view scroll-y class="box flex-1">
			<view class="pl20 pr20 bg-white">
				<up-swiper :list="data.banner" height="376rpx"></up-swiper>
			</view>
			<view class="bg-white">
				<view class="menu d-b-c pt20 pb20 pr">
					<view class="item" :class="index==0?'ml20':data.menu.length-1==index?'mr20':''"
						v-for="(item,index) in data.menu" :key="index">
						<view class="d-s-c pb20" @click="setMenu(index)">
							<text class="mr10 f28 sub" :class="item.checked?'active':''">{{item.name}}</text>
							<up-icon :name="item.checked?'arrow-up-fill':'arrow-down-fill'"
								:color="item.checked?'#EEB663':'#999'" size="15rpx" top="2"></up-icon>
						</view>
						<view class="up d-s-c pt20  f-w pl20 pr20" :class="item.checked?'upact':''">
							<view @click="setAct(index,i)" class='tc m10 p10 f28 br12' v-for="(e,i) in item.tags"
								:key="index" :class="e.checked?'active2':''">
								{{e.name}}
							</view>
						</view>
						<view class="mask" v-show="item.checked"></view>
					</view>
				</view>
			</view>
			<view class="pb40" v-if='data.list.length>0'>
				<view class="list pt30 d-b-c f-w pl30 pr30">
					<view class="item" v-for="(item,index) in data.list" :key="index"
						@click="store.commit('jump',`/pages/detail/detail?id=${item.id}`)">
						<view class="img bg-white">
							<image src="@/static/image/icon_index3.png" mode="aspectFit" class="ww100 hh100"></image>
						</view>
						<view class="p20">
							<view class="name f28 vertical">{{item.name}}</view>
							<view class="subs f22 mt10">{{item.sub}}</view>
						</view>
					</view>
				</view>
				<up-loadmore :status="data.status" line marginTop="20"></up-loadmore>
			</view>
			<up-empty marginTop="20vh" mode="list" v-else></up-empty>
		</scroll-view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useStore } from "vuex"
	const store = useStore()
	const data = reactive({
		banner: [
			'/static/image/icon4.png',
			'/static/image/icon4.png',
			'/static/image/icon4.png',
			'/static/image/icon4.png',
		],
		menu: [{
			name: "空间",
			checked: false,
			tags: [{
				name: "全部",
				checked: false,
			}, {
				name: "客厅",
				checked: false,
			}, {
				name: "卧室",
				checked: false,
			}, {
				name: "厨房",
				checked: false,
			}, {
				name: "卫浴",
				checked: false,
			}, {
				name: "阳台",
				checked: false,
			}, {
				name: "商业空间",
				checked: false,
			}, {
				name: "其他",
				checked: false,
			}]
		}, {
			name: "颜色",
			checked: false,
			tags: [{
				name: "全部2",
				checked: false,
			}, {
				name: "客厅",
				checked: false,
			}, {
				name: "卧室",
				checked: false,
			}, {
				name: "厨房",
				checked: false,
			}, {
				name: "卫浴",
				checked: false,
			}, {
				name: "阳台",
				checked: false,
			}, {
				name: "商业空间",
				checked: false,
			}, {
				name: "其他",
				checked: false,
			}]
		}, {
			name: "风格",
			checked: false,
			tags: [{
				name: "全部3"
			}, {
				name: "客厅"
			}, {
				name: "卧室"
			}, {
				name: "厨房"
			}, {
				name: "卫浴"
			}, {
				name: "阳台"
			}, {
				name: "商业空间"
			}, {
				name: "其他"
			}]
		}, {
			name: "规格",
			checked: false,
			tags: [{
				name: "全部4"
			}, {
				name: "客厅"
			}, {
				name: "卧室"
			}, {
				name: "厨房"
			}, {
				name: "卫浴"
			}, {
				name: "阳台"
			}, {
				name: "商业空间"
			}, {
				name: "其他"
			}]
		}, {
			name: "系列",
			checked: false,
			tags: [{
				name: "全部5"
			}, {
				name: "客厅"
			}, {
				name: "卧室"
			}, {
				name: "厨房"
			}, {
				name: "卫浴"
			}, {
				name: "阳台"
			}, {
				name: "商业空间"
			}, {
				name: "其他"
			}]
		}],
		list: [{
			name: "马可波罗全抛釉砖",
			sub: '90PW G55',
			tags: ['多规格', '多颜色'],
			img: '@/static/image'
		}, {
			name: "马可波罗全抛釉砖",
			sub: '90PW G55',
			tags: ['多规格', '多颜色'],
			img: '@/static/image'
		}, {
			name: "马可波罗全抛釉砖",
			sub: '90PW G55',
			tags: ['多规格', '多颜色'],
			img: '@/static/image'
		}, {
			name: "马可波罗全抛釉砖",
			sub: '90PW G55',
			tags: ['多规格', '多颜色'],
			img: '@/static/image'
		}, {
			name: "马可波罗全抛釉砖",
			sub: '90PW G55',
			tags: ['多规格', '多颜色'],
			img: '@/static/image'
		}]
	})

	function setAct(index, i) {
		data.menu[index].tags[i].checked = !data.menu[index].tags[i].checked
	}

	function setMenu(i) {
		if (data.menu[i].checked) {
			return data.menu[i].checked = false
		}
		data.menu.map(item => item.checked = false)
		data.menu[i].checked = !data.menu[i].checked
		// console.log(data.menu);
	}
</script>

<style scoped lang="scss">
	.list {
		.item {
			width: calc(50% - 10rpx);

			.img {
				height: 200rpx;
				position: relative;
			}

			.subs {
				color: #FBE5CB;
			}
		}
	}

	.menu {
		.item {
			.mask {
				position: absolute;
				height: 999px;
				left: 0;
				width: 100%;
				background-color: rgba(0, 0, 0, .5);
				z-index: 0;
			}

			.up {
				position: absolute;
				left: 0;
				max-height: 0;
				width: 100%;
				overflow: hidden;
				background-color: white;
				z-index: 1;

				view {
					width: calc(33.33% - 20rpx);
					background-color: #f9f9f9;
				}

				.active2 {
					background-color: #EEB663;
					color: #fff;
				}
			}

			.active {
				color: #EEB663;
			}



			.upact {
				max-height: 999px;
			}
		}

	}

	.body {
		height: 100vh;
	}

	.box {
		height: 1px;
	}
</style>